import * as React from 'react';
import { Link } from 'react-router-dom';

import './index.scss';

interface NavbarLinkProps {
  to: string;
}

export class NavbarLink extends React.Component<NavbarLinkProps> {
  render() {
    const { to, children } = this.props;
    return (
      <Link className="x-navbar-link" to={to}>
        {children}
      </Link>
    );
  }
}

export class NavbarItem extends React.Component {
  render() {
    const { children } = this.props;
    return <span className="x-navbar-item">{children}</span>;
  }
}

interface NavbarProps {}

export class Navbar extends React.Component<NavbarProps> {
  render() {
    const { children } = this.props;
    return <nav className="x-navbar">{children}</nav>;
  }
}
